<!--  -->
<template>
  <div id="main2" style="width:100%;height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: {
    histogram: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    histogram: {
      handler (val) {
        this.init()
      },
      deep: true
    }
  },
  data () {
    return {

    }
  },
  components: {

  },
  mounted () {
    setTimeout(() => {
      this.init()
    }, 20)
  },
  methods: {
    init () {
      const myChart = echarts.init(document.getElementById('main2'))
      myChart.setOption({
        title: {
          text: '存量、新增单位月度代发金额趋势'
        },
        color: ['#FFA8A8 ', '#789EFF'],
        xAxis: {
          type: 'category',
          data: this.histogram ? this.histogram.map(item => item.month) : ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月']
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          // trigger: 'axis'
        },
        legend: {
          right: 0,
          itemHeight: 12,
          itemWidth: 12,
          data: [
            {
              name: '存量',
              icon: 'circle',
            },
            {
              name: '新增',
              icon: 'circle',
            }
          ]
        },
        grid: { // 让图表占满容器

          left: '5%',
          right: '4%',

        },
        series: [
          {
            name: '存量',
            data: this.histogram ? this.histogram.map(item => item.stockNum) : [],
            type: 'bar',
            barWidth: 15,

            itemStyle: {
              borderRadius: [5, 5, 0, 0], // 设置圆角大小
            }
          },
          {
            name: '新增',
            data: this.histogram ? this.histogram.map(item => item.incrementNum) : [],
            type: 'bar',
            barWidth: 15,

            itemStyle: {
              borderRadius: [5, 5, 0, 0], // 设置圆角大小

            }
          }
        ]
      })
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
  }
}
</script>

<style lang='less' scoped>
</style>